<template>
    <div>
        <div class="infodetail">
            <div class="education">
                <div class="title">
                    <span class="slogan">教育背景</span>
                    <span class="translation">Education</span>
                </div>
                <div class="info" v-if="editing">
                    <el-input v-model="resume.educationBackground"></el-input>
                </div>
                <div class="info" v-else>
                    {{ resume.educationBackground }}
                </div>
            </div>
            <div class="experience">
                <div class="title">
                    <span class="slogan">项目经历</span>
                    <span class="translation">Experience</span>
                </div>
                <div class="info" v-if="editing">
                    <el-input v-model="resume.project"></el-input>

                </div>
                <div class="info" v-else>
                    {{ resume.project }}
                </div>
            </div>
            <div class="competence">
                <div class="title">
                    <span class="slogan">专业技能</span>
                    <span class="translation">Competence</span>
                </div>
                <div class="info" v-if="editing">
                    <el-input v-model="resume.skills"></el-input>
                </div>
                <div class="info" v-else>
                    {{ resume.skills }}
                </div>
            </div>
            <div class="aboutme">
                <div class="title">
                    <span class="slogan">自我评价</span>
                    <span class="translation">About Me</span>
                </div>
                <div class="info" v-if="editing">
                    <el-input v-model="resume.selfEvaluation"></el-input>

                </div>
                <div class="info" v-else>
                    {{ resume.selfEvaluation }}
                </div>
            </div>
        </div>
        <div class="modify" v-if="this.$store.state.IsSeeker === true">
            <el-button type="primary" @click="goback">返回<i class="el-icon-back"></i></el-button>
            <el-button type="primary" @click="enableEditing">编辑<i class="el-icon-edit"></i></el-button>
            <el-button type="primary" @click="stopEditingAndSave">保存<i class="el-icon-upload2"></i></el-button>
        </div>
    </div>
</template>
<script>
import axios from 'D:\\job_management\\src\\axiosConfig.js'
export default {

    created() {
        if (this.$store.state.IsSeeker === true) {
            axios.get(`/seekers/resume/information/${this.$store.state.resumeId}`,
            ).then(res => {
                this.resume = res.data.data
            }).catch(err => {
                console.log(err);
            })
        } else {
            axios.post('/company/resumedetail/get',
                {

                    account: this.$store.state.account,
                    resumeId: this.$store.state.resumeId

                }).then(res => {
                    console.log(res);
                    this.resume = res.data.data.resume;
                }).catch(err => {
                    console.log(err);
                })
        }
    },


    data() {
        return {
            editing: false,
            resume: {},
        }
    },
    methods: {
        goback() {
            this.$router.push('PositionBrowsing')
        },

        enableEditing() {
            this.editing = true;
        },
        stopEditingAndSave() {
            console.log(this.$store.state.expJob);
            this.editing = false;
            //此处将updateMsg传给后端
            axios.post('/seekers/resume/update',
                {
                    resumeId: this.$store.state.resumeId,
                    seekerAccount: this.$store.state.account,
                    expectionJob: this.$store.state.expJob,
                    educationBackground: this.resume.educationBackground,
                    project: this.resume.project,
                    skills: this.resume.skills,
                    selfEvaluation: this.resume.selfEvaluation

                })
                .then(res => {
                    console.log(res);
                })

        }

    }
}
</script>
<style scoped>
.infodetail {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.infodetail>* {
    width: 100%;
    height: 25vh;
}

.slogan {
    font-size: 1.5em;
    font-weight: bold;
    margin-right: 1em;
    float: left;
}

.translation {
    font-size: 1em;
    font-weight: 400;
    margin-right: 1em;
    margin-top: 0.7em;
    float: left;
}

.info {
    width: 100vw;
    height: 18vh;
    font-size: 1em;
    font-weight: 400;
    margin-right: 1em;
    margin-top: 0.7em;
    float: left;
    background-color: #fff;
}


.modify {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}
</style>